<script setup>

import {onBeforeMount, reactive, computed} from "vue";
import {useRoute} from "vue-router";
import {btnTypeFormatter, getLocalObj, setLocalObj, tabFormat} from "@/utils/common.ts";
import {getDataList} from "@/api/api.js";
import BlackCard from "@/components/card/BlackCard.vue";
import BlackTable from "@/components/table/BlackTable.vue";
import router from "@/router/router.js";
import {Clock, CollectionTag, User} from "@element-plus/icons-vue";
import DOMPurify from 'dompurify'


let pageInfo = reactive({
  page: 1,
  size: 10,
  total: 0,
  type: 1
})
let menuName = null;
let btnType = null;
let detail = reactive({
  type: '',
  title: '',
  author: '',
  content: '',
  createTime: '',
  updateTime: '',
});
// 将内容进行 XSS 净化，确保富文本安全渲染
const safeHtml = computed(() => DOMPurify.sanitize(detail.content))
onBeforeMount(() => {
  const route = useRoute();
  init(route.query)
})

const init = (row)=>{
  if (Object.keys(row).length > 0) {
    detail = row;
    setLocalObj('data_detail', detail);
  } else {
    detail = getLocalObj('data_detail');
  }
  pageInfo.type = Number.parseInt(detail.type);
  menuName = tabFormat(detail.type)
  btnType = btnTypeFormatter(pageInfo.type)
  getMsg(pageInfo);
}

const formatter = (row, column, cellValue) => {
  return tabFormat(cellValue);
}

const getMsg = (pageInfo) => {
  getDataList(pageInfo).then(res => {
    pageInfo.total = res.total;
    pageInfo.list = res.list;
  });
}

const goListPage = (pageInfo) => {
  router.push({path: '/data/list', query: {...pageInfo}})
}

const clickRow = (row) => {
  init(row)
  router.push({
    path: '/data/content',
    query: {...row}
  })
}
</script>

<template>
  <div class="view-container">
    <el-breadcrumb separator-class="el-icon-arrow-right" style="line-height: 15px;position: relative;z-index: 100">
      <el-breadcrumb-item :to="{path: '/data'}">菜市场</el-breadcrumb-item>
      <el-breadcrumb-item :to="{path: '/data/list', query: pageInfo}">
        {{ menuName }}
      </el-breadcrumb-item>
      <el-breadcrumb-item :to="{path: '/data/detail', query:{detail: detail, menuName: menuName}}">
        {{ detail.title }}
      </el-breadcrumb-item>
    </el-breadcrumb>
    <div class="hor-container">
      <black-card id="content" :title="detail.title">
        <el-descriptions id="detailPanel" :column="2">
          <el-descriptions-item>
            <template #label>
            <span class="author">
              <el-icon><User/></el-icon>作者:
            </span>
            </template>
            <span class="author">{{ detail.author }}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
            <span class="type">
              <el-icon><CollectionTag/></el-icon>类型:
            </span>
            </template>
            <el-button size="small" :type="btnType" plain @click="goListPage">
              <span class="type">{{ menuName }}</span>
            </el-button>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
            <span class="createTime">
              <el-icon><Clock/></el-icon>发布时间:
            </span>
            </template>
            <span class="createTime">{{ detail.createTime }}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
            <span class="updateTime">
              <el-icon><Clock/></el-icon>更新时间:
            </span>
            </template>
            <span class="updateTime">{{ detail.updateTime }}</span>
          </el-descriptions-item>
        </el-descriptions>
        <el-divider></el-divider>
        <div id="main-content">
          <div style="font-size:18px" v-html="safeHtml"></div>
        </div>
      </black-card>
      <black-card id="allMsg" :title="menuName" slot-type="button" :btn-method="goListPage" :method-param="pageInfo">
        <black-table :page-info="pageInfo" :query="getMsg" :height="350" :click-row="clickRow">
          <el-table-column prop="type" label="类型" :formatter="formatter"></el-table-column>
          <el-table-column prop="title" label="标题" show-overflow-tooltip>
            <template #default="scope">
              <div style="text-decoration:none;cursor: pointer;">
                {{ scope.row.title }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="日期"></el-table-column>
        </black-table>
      </black-card>
    </div>
  </div>
</template>

<style scoped>
#detailPanel {
  padding: 20px;
  color: rgb(90, 94, 124);
}

#content {
  width: 60%;
  height: 600px;
}

#main-content{
  height: 400px;
  overflow: auto;
}

#allMsg {
  width: 40%;
  height: 100%;
}

/* 移动端适配 */
@media (max-width: 768px) {
  #content,
  #allMsg {
    width: 100%;
  }
  
  #content {
    height: auto;
  }
  
  #main-content {
    height: 300px;
  }
  
  #detailPanel {
    padding: 10px;
  }
  
  .el-breadcrumb {
    font-size: 12px;
  }
  
  .el-breadcrumb__item {
    font-size: 12px;
  }
  
  .el-descriptions {
    font-size: 12px;
  }
  
  .el-descriptions__label {
    font-size: 12px;
  }
  
  .el-descriptions__content {
    font-size: 12px;
  }
  
  #main-content div {
    font-size: 16px !important;
  }
}

@media (max-width: 480px) {
  #main-content {
    height: 250px;
  }
  
  #detailPanel {
    padding: 5px;
  }
  
  .el-breadcrumb {
    font-size: 10px;
  }
  
  .el-breadcrumb__item {
    font-size: 10px;
  }
  
  .el-descriptions {
    font-size: 10px;
  }
  
  .el-descriptions__label {
    font-size: 10px;
  }
  
  .el-descriptions__content {
    font-size: 10px;
  }
  
  #main-content div {
    font-size: 14px !important;
  }
}
</style>